<template>
  <div class="market_search">
    <div class="header">
      <router-link to="Market_index"><span></span></router-link>
      <input type="text" placeholder="搜索商品" id="mainSearch" v-on:input="input_search()" v-model="inputContent"/>
      <span v-on:click="show_nav()">···</span>

      <div class="nav_block" v-if="nav_flag">
        <router-link to="/Home"><p><span class="glyphicon glyphicon-home"></span>首页</p></router-link>
        <router-link to="/Market"><p><span class="glyphicon glyphicon-list-alt"></span>分类搜索</p></router-link>
        <router-link to="/Cart"><p><span class="glyphicon glyphicon-shopping-cart"></span>购物车</p></router-link>
        <router-link to="/Mine_in"><p><span class="glyphicon glyphicon-user"></span>我的</p></router-link>
      </div>
    </div>
    <div class="search_content">
      <div class="ready_made" v-show="!show_list">
        <h2><span class="glyphicon glyphicon-fire	"></span>热门搜索</h2>
        <router-link to="Market_result"><span>金玫瑰庄园干红葡萄酒</span></router-link>
        <router-link to="Market_result"><span>奔富</span></router-link>
        <router-link to="Market_result"><span>泽巴赫</span></router-link>
        <router-link to="Market_result"><span>白马庄园</span></router-link>
        <router-link to="Market_result"><span>安迪斯砖石</span></router-link>
      </div>
      <nav v-show="show_list">
        <ul class="assist">
          <li v-for="item of search_preset_list">
            <router-link to="Market_result"><span>{{item["chinese"]}}</span></router-link>
          </li>
        </ul>
      </nav>
    </div>

  </div>
</template>

<script>
  import jquery from 'jquery'

  export default {
    name: 'market_search',
    data: function () {
      return {
        msg: 'market_search',
        show_list: false,
        nav_flag: false,
        inputContent: "",
        search_preset_list: [],
      }
    }, methods: {
      input_search: function () {

        this.show_list = true;
        console.log("点击还是输入??")
        console.log(this.inputContent)
      },
      show_nav: function () {
        this.nav_flag = !this.nav_flag;
      }
    },
    mounted: function () {
      var _this = this;
      jquery("#mainSearch").on({
        "focus": function (e) {
          jquery(".assist").slideDown(1000);
          e.preventDefault();
        }, "keyup": function (e) {
          var val = $(this).val();
          var jsScriptSrc = "http://so.wangjiu.com/product/productfacet/?&pagecount=5&result_type=jsonp&keyword="
            + val + "&client_sig=wap&format=jsonp&_=" + new Date().getTime();
          $.ajax({
            url: jsScriptSrc,
            // jsonp类型下的请求,只能是GET
            type: 'GET',
            data: {},
            // 指定为jsonp类型
            dataType: 'jsonp',
            // 服务器端获取回调函数名的key,callback是默认值.
            jsonp: 'callback',
            //回调函数名
            jsonCallback: 'jQuery21404599908823238783_1493167211540',
            client_sig: "wap",
            success: function (data) {
              _this.search_preset_list = [];
              if (data["result"].length) {
                _this.search_preset_list = data["result"].slice(0, 50);
              } else {
                _this.search_preset_list = [];
              }
            },
            error: function (msg) {
              console.log('fail');
            }
          })
        }
      });
    }
  }
</script>
<style scoped lang="scss">
  
  .market_search {
  background-color: whitesmoke;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: +200;
  top: 0;
  overflow: hidden;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.15rem;
  height: 1.15rem;
  text-align: center;
  background: white;
  border-bottom: 1px solid lightgrey;
  z-index: +2;
  input {
    background: whitesmoke;
    border: 1px solid lightgrey;
    line-height: 0.71rem;
    font-size: 0.35rem;
    padding-top: 0.05rem;
    border-radius: 0.15rem;
    width: 73%;
    outline: none;
    text-indent: 0.2rem;
    a {
      display: block;
      width: 100%;
      color: grey;
      span {
        padding-right: 0.1rem;
      }
    }
  }
  & > a, & > span {
    width: 10%;
    display: inline-block;
    position: relative;
    color: grey;
    span {
      position: absolute;
      top: -0.28rem;
      left: 0.25rem;
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      &:after {
        transform: rotateZ(45deg);
        display: block;
        width: 0.28rem;
        height: 0.28rem;
        content: "";
        border: 1px solid grey;
        border-width: 0 0 1px 1px;
      }
    }
  }
  & > span {
    font-size: 1rem;
    line-height: 0;
    position: relative;
    top: 0.2rem;
  }
  .nav_block {
    text-align: left;
    position: absolute;
    top: 1.2rem;
    right: 0.2rem;
    height: 3.5rem;
    border-radius: 0.15rem;
    width: 2.8rem;
    background: black;
    z-index: +1;
    a {
      p {
        line-height: 0.85rem;
        font-size: 0.35rem;
        span {
          padding: 0 0.3rem;
        }
        color: white;
      }
    }
  }
  .nav_block:after {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    background: black;
    content: "";
    top: -0.15rem;
    right: 0.4rem;
    transform: rotateZ(45deg);
  }

}

.search_content {
  background: white;
  border-bottom: 1px solid lightgrey;
  margin-top: 1.2rem;
  .ready_made {
    position: relative;
    width: 90%;
    h2 {
      font-size: 0.39rem;
      line-height: 1.5rem;
      text-indent: 0.18rem;
      span {
        padding-right: 0.2rem;
      }
    }
    a {
      display: inline-block;
      border: 1px solid lightgrey;
      border-radius: 0.15rem;
      margin: 0 0 0.3rem 0.3rem;
      span {
        display: block;
        text-align: center;
        padding: 0.15rem 0.25rem;
        color: grey;
        font-size: 0.35rem;
      }
    }
  }
  nav {
    width: 100%;
    padding-bottom: 1.2rem;
    height: 100%;
    position: absolute;
    overflow: hidden;
    ul {
      position: relative;
      overflow: auto;
      height: 100%;
      li {
        background: white;
        border-bottom: 1px solid lightgrey;
        a {
          text-indent: 0.25rem;
          line-height: 1.06rem;
          display: block;
          span {
            font-size: 0.35rem;
            color: grey;
          }
        }
      }
      &:after {
        content: "no more";
        text-align: center;
        height: 2rem;
        background: white;
        display: block;
      }
    }
  }
}

  
</style>
